<template>
  <div class="container">
    <div class="left-side">
      <div class="logo">
        <img
          src="http://117.72.66.230:9000/cyy/20250126/5f0acd5d5c204c46a0c05ceb2f448387..jpg"
          alt="Logo"
          class="circular-logo"
        />
        <h1>欢迎使用我们的系统</h1>
      </div>
      <div class="messages">
        <h3>系统公告</h3>
        <ul>
          <li v-for="message in messages" :key="message.id">
            <div class="message-content">
              [{{ message.title }}] {{ message.content }}
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="right-side">
      <a-form
        :model="formState"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <h2 class="login-title">欢迎登录</h2>
        <a-form-item
          name="userAccount"
          :rules="[{ required: true, message: '请输入用户名！' }]"
        >
          <a-input
            v-model:value="formState.userAccount"
            placeholder="请输入账号"
            size="large"
          />
        </a-form-item>
        <a-form-item
          name="userPassword"
          :rules="[{ required: true, message: '请输入密码！' }]"
        >
          <a-input-password
            v-model:value="formState.userPassword"
            placeholder="请输入密码"
            size="large"
          />
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            block
            size="large"
            class="login-button"
          >
            登 录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, h } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";

// 模拟从后端获取的消息数据
const messages = ref<SystemNotification[]>([]);

//后端获取最近5条数据
const fetchMessages = async () => {
  try {
    const queryRequest: SystemNotificationQueryRequest = {
      current: 1,
      pageSize: 5,
    };
    const res = await listSystemNotificationByPage(queryRequest);
    if (res.data.code === 0) {
      messages.value = res.data.data.records;
    } else {
      message.error("获取数据失败");
    }
  } catch (error) {
    message.error("获取数据失败");
  }
};
fetchMessages();
import { reactive } from "vue";
import { userLogin } from "@/api/user";
import { userLoginUserStore } from "@/store/userLoginUserStore";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import {
  SystemNotification,
  SystemNotificationQueryRequest,
} from "@/models/systemNotification";
import { listSystemNotificationByPage } from "@/api/systemNotification";

interface FormState {
  userAccount: string;
  userPassword: string;
}

const formState = reactive<FormState>({
  userAccount: "",
  userPassword: "",
});
const loginUserStore = userLoginUserStore();
const router = useRouter();
const onFinish = async (values: any) => {
  //console.log("Success:", values);
  const res = await userLogin(values);
  //登录成功后，保存到全局状态中
  if (res.data.code == 0 && res.data.data) {
    await loginUserStore.fetchLoginUser();
    const userRole = loginUserStore.loginUser.userRole;
    console.log("用户角色", userRole);
    if (userRole === "user") {
      router.push({
        path: "/user/dashboard",
        replace: true,
      });
    } else if (userRole === "admin") {
      router.push({
        path: "/user/adminDashboard",
        replace: true,
      });
    }
  } else {
    message.error("登录失败");
  }
};
const handleRegister = () => {
  console.log("handleRegister called");
  router.push({
    // path: "/user/register",
    name: "userRegister",
  });
  console.log("ending");
};
const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
</script>
<style scoped>
.container {
  display: flex;
  min-height: 100vh;
  background-color: #f0f2f5;
}

.left-side {
  flex: 1;
  background-color: #fff;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.right-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.login-form {
  width: 100%;
  max-width: 400px;
  padding: 2.5rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.login-title {
  text-align: center;
  margin-bottom: 2.5rem;
  /* font-size: 1.8rem;*/
  font-weight: 600;
}

.logo {
  text-align: center;
  margin-bottom: 2.4rem;
}

.logo img {
  width: 120px;
  margin-bottom: 1rem;
}

.messages {
  padding: 1rem;
}

.messages ul {
  list-style: none;
  padding: 0;
}

.messages li {
  padding: 1rem;
  margin-bottom: 0.8rem;
  background: #f0f2f5;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.messages li:hover {
  background: #e6f7ff;
  transform: translateX(5px);
}

.message-content {
  color: #333;
  margin-bottom: 0.5rem;
}

.message-date {
  color: #999;
  font-size: 0.85rem;
  text-align: right;
}

h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #000;
}

.circular-logo {
  width: 80px; /* 根据需要调整宽度 */
  height: 120px; /* 高度与宽度相同，以保持圆形 */
  border-radius: 50%; /* 使图片变为圆形 */
  object-fit: cover; /* 确保图片按比例缩放并填充容器 */
}
h3 {
  color: #000;
  margin-bottom: 1.5rem;
}

:deep(.ant-input-affix-wrapper) {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  transition: all 0.3s;
}

:deep(.ant-input-affix-wrapper:hover) {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

:deep(.ant-input-affix-wrapper-focused) {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

:deep(.ant-input) {
  font-size: 1rem;
}

:deep(.anticon) {
  color: #bfbfbf;
}

.login-button {
  height: 48px;
  font-size: 1.1rem;
  border-radius: 8px;
  background: #1890ff;
  border: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  transition: all 0.3s;
}

.login-button:hover {
  background: #40a9ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.35);
}

:deep(.ant-form-item) {
  margin-bottom: 24px;
}

:deep(.ant-form-item-explain-error) {
  color: #ff4d4f;
  font-size: 0.9rem;
  margin-top: 4px;
}
</style>
